<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">区域:</p>
			</el-col>
			<el-col :span="4">
				<el-select v-model="condition.area" size="small" placeholder="请选择区域" clearable @change="getCompanyInfo">
					<el-option v-for="item in areaCombo" :label="item.label" :value="item.code"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">品牌:</p>
			</el-col>
			<el-col :span="4">
				<el-select v-model="condition.brand" size="small" placeholder="请选择品牌" clearable @change="getCompanyInfo">
					<el-option v-for="item in brandCombo" :label="item.label" :value="item.code"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">公司:</p>
			</el-col>
			<el-col :span="4">
				<el-select v-model="condition.companyId" size="small" placeholder="请选择公司" clearable>
					<el-option v-for="item in companyCombo" :label="item.oName" :value="item.id"></el-option>
				</el-select>
			</el-col>
		</el-row>
		<el-row :gutter="24">
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">活跃程度:</p>
			</el-col>
			<el-col :span="4">
				<el-select v-model="condition.active" placeholder="请选择" left size="small" clearable>
					<el-option label="SS" value="SS"></el-option>
					<el-option label="S" value="S"></el-option>
					<el-option label="A" value="A"></el-option>
					<el-option label="B" value="B"></el-option>
					<el-option label="C" value="C"></el-option>
					<el-option label="D" value="D"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">车辆:</p>
			</el-col>
			<el-col :span="4">
				<el-select v-model="condition.type" placeholder="请选择" left size="small" clearable>
					<el-option label="基盘车辆" value="base"></el-option>
					<el-option label="全部车辆" value="all"></el-option>
				</el-select>
			</el-col>

			<el-col :span="2">
				<el-button type="primary" size="small" @click="querySwitch">查询</el-button>
			</el-col>
			<!--<el-col :span="7" style="margin-left: -30px;text-align: right;">
				<el-button type="primary" size="small" @click="explainShow =true">报表说明</el-button>
			</el-col>-->
		</el-row>
		<el-row>
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="统计" name="first">
					<el-table :data="tableData.dataList" border @row-dblclick="dbClick" v-loading="loading2" element-loading-text="正在统计数据...">
						<el-table-column prop="brand" label="品牌" width="100px" :formatter="brandConversion2">
						</el-table-column>
						<el-table-column :formatter="areaCov" label="区域" width="100px">
						</el-table-column>
						<el-table-column label="公司" prop="oName" width="200px">
						</el-table-column>
						<el-table-column prop="sum" label="车辆总数" width="100px">
						</el-table-column>
						<el-table-column prop="count1" label="0-2000" width="100px">
						</el-table-column>
						<el-table-column label="占比" :formatter="countCov1" width="100px">
						</el-table-column>
						<el-table-column prop="count2" label="2000-3000" width="120px">
						</el-table-column>
						<el-table-column :formatter="countCov2" label="占比" width="100px">
						</el-table-column>
						<el-table-column prop="count3" label="3000-5000" width="120px">
						</el-table-column>
						<el-table-column :formatter="countCov3" label="占比" width="100px">
						</el-table-column>
						<el-table-column prop="count4" label="5000-8000" width="120px">
						</el-table-column>
						<el-table-column :formatter="countCov4" label="占比" width="100px">
						</el-table-column>
						<el-table-column prop="count5" label="8000-10000" width="120px">
						</el-table-column>
						<el-table-column :formatter="countCov5" label="占比" width="100px">
						</el-table-column>
						<el-table-column prop="count6" label="10000以上" width="120px">
						</el-table-column>
						<el-table-column :formatter="countCov6" label="占比" width="100px">
						</el-table-column>
					</el-table>
					<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
					</el-pagination>
				</el-tab-pane>
				<el-tab-pane label="明细" name="second">
					<el-table :data="detailData.dataList" border v-loading="loading" element-loading-text="正在统计数据...">
						<el-table-column prop="brand" label="品牌" width="120px" :formatter="brandConversion">
						</el-table-column>
						<el-table-column :formatter="areaCov" label="区域" width="120px">
						</el-table-column>
						<el-table-column prop="oName" label="公司" width="250px">
						</el-table-column>
						<el-table-column prop="vin" label="VIN" width="200px">
						</el-table-column>
						<el-table-column prop="plateNum" label="车牌号" width="120px">
						</el-table-column>
						<el-table-column prop="series" label="车系" width="150px">
						</el-table-column>
						<el-table-column prop="model" label="车型" width="150px">
						</el-table-column>
						<el-table-column prop="carAge" label="车龄" width="120px">
						</el-table-column>
						<el-table-column prop="ownerName" label="车主" width="120px">
						</el-table-column>
						<el-table-column prop="ownerCity" label="城市" width="150px">
						</el-table-column>
						<el-table-column prop="fromCompany" label="本地购车" width="120px">
						</el-table-column>
						<el-table-column prop="buyDate" :formatter="bugDateCov" label="购买日期" width="120px">
						</el-table-column>
						<el-table-column prop="prevMaintainDate" :formatter="prevCov" label="上次进场日期" width="120px">
						</el-table-column>
						<el-table-column prop="active" label="活跃等级" width="120px">
						</el-table-column>
					</el-table>
					<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChanges" :current-page="CurentPages" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="detailData.total">
					</el-pagination>
				</el-tab-pane>
			</el-tabs>
		</el-row>
	</div>
</template>
<script>
	import moment from 'moment'
	export default {
		data: function() {
			return {
				//
				brandCombo: [],
				//
				areaCombo: [],
				//
				companyCombo: [],
				//baobiaoshuoming
				explainShow: false,
				//tab页
				activeName: 'first',
				CurentPage: 1,
				CurentPages: 1,
				page: this.page,
				//表格数据
				tableData: {
					total: 0,
					dataList: [],
				},
				//mingxi
				detailData: {
					total: 0,
					dataList: [],
				},
				//查询条件
				condition: {
					active: '', //  活跃 ，
					companyId: '', //  公司ID，
					brand: '', //  品牌 ，
					area: '', // 区域
					type: '', //车辆类型
				},
				// 公司ID
				companyId: "",
				// 公司ID和Name
				cidAndcname: [],
				//正在加载
				loading2: false,
				//正在加载
				loading: false,
				// 品牌label 和 value 
				oCarBrandList:[],

			}
		},
		methods: {
			querySwitch:function(){
				if(this.$data.activeName=="first"){
					this.query();
				}
				else{
					this.detailQuery();
				}
				
			},
			//切换tabs
			handleClick: function(){
				debugger;
				if(this.$data.activeName=="second"){
					//清空明细数据
					this.$data.detailData.dataList = [];
					this.$data.detailData.total = 0;
					this.$data.CurentPages = 1;
					if(this.$data.tableData.dataList.length>0){
						this.$data.companyId = this.$data.tableData.dataList[0].companyId;
						this.detailQuery();
					}
				}if(this.$data.activeName=="first"){
					this.$data.detailData.dataList = [];
					this.$data.detailData.total = 0;
				}
			},
			//双击表格
			dbClick: function(row, event) {
				this.$data.activeName = "second";
				//alert(row.companyId);
				this.$data.companyId = row.companyId;
				this.$data.CurentPages = 1;
				this.detailQuery();
			},
			query: function() {
				if(this.$data.condition.companyId == "") {
					this.$message.error("请选择公司！");
				} else {
					this.$data.loading2 = true;
					debugger;
					this.$http.post(this.API_ROOT + '/crm/kpi/baseCarContribution', this.$data.condition, {
						params: {
							start: this.$data.CurentPage,
							limit: this.$data.page.pageSize,

						}
					}).then(resp => {
						debugger;
						if(resp.data.success) {
							resp.data.total = parseInt(resp.data.total);
							this.$data.tableData = resp.data;
							
							if(resp.data.dataList[0].companyId == null 
								|| resp.data.dataList[0].companyId == ""){
									if(resp.data.dataList[0].sum == "0"){
										this.$data.tableData.dataList = [];
										this.$data.tableData.total = 0;
										this.$message("暂无数据");
									}
								
							}
							this.$data.loading2 = false;
						} else {
							this.$message.error(resp.data.msg);
						}
					}, resp => {});
				}

			},
			//mingxi chaxun 
			detailQuery: function() {
				debugger;
				this.$data.loading = true;
				this.$http.post(this.API_ROOT + '/crm/kpi/baseCarContributionDetail', this.$data.condition, {
					params: {
						start: this.$data.CurentPages,
						limit: this.$data.page.pageSize,
						companyId: this.$data.companyId
					}
				}).then(resp => {
					if(resp.data.success) {
						resp.data.total = parseInt(resp.data.total);
						this.$data.detailData = resp.data;
					} else {
						this.$message.error(resp.data.msg);
					}
					this.$data.loading = false;
				}, resp => {});
			},
			handleSizeChange: function() {

			},
			//列表当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				this.query();
			},
			//mingxi列表当前页切换
			handleCurrentChanges: function(currentPage) {
				this.$data.CurentPages = currentPage;
				this.detailQuery();
			},
			//quyu zhuanhuan 
			areaCov: function(row){
				debugger;
				for(var i=0;i<this.$data.areaCombo.length;i++){
					if(this.$data.areaCombo[i].code == row.oArea){
						 return this.$data.areaCombo[i].label;
						break;
					}
				}
			},

			//占比计算
			countCov1: function(row) {
				debugger;
				if(row.count1 == "" || row.count1 == null) {
					return "";
				} else {
					var data = (Number(row.count1)*100 / Number(row.sum)).toFixed(2) + "%";
					return data;
				}
			},
			countCov2: function(row) {
				if(row.count2 == "" || row.count2 == null) {
					return "";
				} else {
					var data = (Number(row.count2)*100 / Number(row.sum)).toFixed(2) + "%";
					return data;
				}
			},
			countCov3: function(row) {
				if(row.count3 == "" || row.count3 == null) {
					return "";
				} else {
					var data = (Number(row.count3)*100 / Number(row.sum)).toFixed(2) + "%";
					return data;
				}
			},
			countCov4: function(row) {
				if(row.count4 == "" || row.count4 == null) {
					return "";
				} else {
					var data = (Number(row.count4)*100 / Number(row.sum)).toFixed(2) + "%";
					return data;
				}
			},
			countCov5: function(row) {
				if(row.count5 == "" || row.count5 == null) {
					return "";
				} else {
					var data = (Number(row.count5)*100 / Number(row.sum)).toFixed(2) + "%";
					return data;
				}
			},
			countCov6: function(row) {
				if(row.count6 == "" || row.count6 == null) {
					return "";
				} else {
					var data = (Number(row.count6)*100 / Number(row.sum)).toFixed(2) + "%";
					return data;
				}
			},
			//riqi zhuanhuan
			bugDateCov: function(row) {
				return this.dateCow(row.buyDate);
			},
			prevCov: function(row) {
				return this.dateCow(row.prevMaintainDate);
			},
			// 日期转换
			dateCow: function(date) {
				if(date == "" || date == null) return "";
				return moment(Number(date)).format("YYYY-MM-DD");
			},
			//获取公司信息
			getCompanyInfo: function() {
				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/all", {
					params: {
						area: this.$data.condition.area,
						brand: this.$data.condition.brand
					}
				}).then(resp => {
					this.$data.companyCombo = resp.data.dataList;
					if(this.$data.companyCombo.length > 0) {
						this.$data.condition.companyId = this.$data.companyCombo[0].id;
					}
				});
			},
			//获取区域
			getarea: function() {

				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/area/all", {
					params: {}
				}).then(resp => {
					this.$data.areaCombo = resp.data.dataList;
				});
			},
			//获取品牌
			getBrand: function() {
				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/brand/all", {
					params: {}
				}).then(resp => {
					this.$data.brandCombo = resp.data.dataList;
				});
			},
			// 获取公司品牌 label 和 value
			getoCarBrand:function(){
				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/oCarBrand", {
					params: {}
				}).then(resp => {
					this.$data.oCarBrandList = resp.data.dataList;
				});
			},
			// 品牌转换
			brandConversion:function(cow){
				debugger;
				for(var i=0;i<this.$data.oCarBrandList.length;i++){
					if(cow.brand == this.$data.oCarBrandList[i].value){
						return this.$data.oCarBrandList[i].label;
						break;
					}
				}
			},
			// 品牌转换
			brandConversion2:function(cow){
				debugger;
				for(var i=0;i<this.$data.oCarBrandList.length;i++){
					if(cow.brand == this.$data.oCarBrandList[i].value){
						return this.$data.oCarBrandList[i].label;
						break;
					}
				}
			},
		},
		created: function() {
			this.getarea();
			this.getBrand();
			this.getCompanyInfo();
			this.getoCarBrand();
		}
	}
</script>